<!--  -->
<template>
  <div class="calculatorlist">
    <van-nav-bar
      @click-left="onClickLeft"
      title="收益计算器"
      :left-arrow="true"
    />
    <!-- <div class="tip">【异常】因银行系统维护，货款，还款功能暂停使用</div> -->
    <van-cell-group>
      <van-field v-model="money" placeholder="意向投资金额" input-align="right">
        <template v-slot:label>
          <span class="name">投资金额</span>
        </template>
        <template v-slot:right-icon>
          <span class="name">元</span>
        </template>
      </van-field>
      <van-field v-model="days" placeholder="期望投资期限" input-align="right">
        <template v-slot:label>
          <span class="name">投资期限</span>
        </template>
        <template v-slot:right-icon>
          <span class="name">日</span>
        </template>
      </van-field>
      <van-field v-model="apr" placeholder="期待日化利率" input-align="right">
        <template v-slot:label>
          <span class="name">日转化率</span>
        </template>
        <template v-slot:right-icon>
          <span class="name">%</span>
        </template>
      </van-field>
      <van-field
        @click="showPicker = true"
        v-model="typename"
        readonly
        is-link
        placeholder="每日返息，到期还本"
        input-align="right"
      >
        <template v-slot:label>
          <span class="name">还款方式</span>
        </template>
      </van-field>
    </van-cell-group>
    <div class="foot">
      <van-button type="primary" class="reset" @click="reset">重置</van-button>
      <van-button type="primary" class="start" @click="start"
        >开始计算</van-button
      >
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "calculatorlist",
  },
  data() {
    //这里存放数据
    return {
      apr: "",
      days: "",
      typename: "一次性还本付息",
      typevalue: "E",
      money: "",
      columns: [
        { text: "一次性还本付息", id: "E" },
        { text: "每日返息，到期还本", id: "A" },
        { text: "每周返息，到期还本", id: "B" },
        { text: "每月返息，到期还本", id: "C" },
        { text: "每日复利，保本保息", id: "D" },
      ],
      showPicker: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    reset() {
      this.apr = "";
      this.days = "";
      this.typename = "一次性还本付息";
      this.typevalue = "E";
      this.money = "";
    },
    onConfirm(value) {
      this.typename = value.text;
      this.typevalue = value.id;
      this.showPicker = false;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    start() {
      this.$router.push({
        path: "/result",
        query: {
          money: this.money,
          type: this.typevalue,
          days: this.days,
          apr: this.apr,
        },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
/* //@import url(); 引入公共css类 */
.calculatorlist {
  width: 100%;
  height: 100%;
  background: #fafafa;
  overflow-y: auto;
  /deep/.van-cell {
    line-height: 30px;
    i {
      line-height: 30px;
    }
  }
  .tip {
    font-size: 13px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ff3232;
    height: 35px;
    background: #ffeaea;
    line-height: 35px;
  }
  .name {
    font-size: 15px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    color: #20253a;
  }
  .foot {
    padding: 20px 18px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .reset {
      width: 45%;
      margin-right: 10%;
      background: #ffffff;
      border: 1px solid #dfdfdf;
      border-radius: 5px;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #24293d;
    }
    .start {
      width: 45%;
      background: linear-gradient(180deg, #ff3927, #ff6b4f 133%);
      border-radius: 5px;
      box-shadow: 0px 2px 4px 0px #ffd9d4;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #ffffff;
      border: none;
    }
  }
}
</style>